<!--
author: xmoban.cn
author URL: http://xmoban.cn
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html lang="en">

<head>
	<title>Pets Care an Animals Category Bootstrap Responsive website Template | Single Page :: xmoban.cn</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="Pets Care Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
	SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" />
	<script type="application/x-javascript">
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<!-- Custom Theme files -->
	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="all">
	<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
	<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<!-- font-awesome icons -->
	<!-- //Custom Theme files -->
	<!-- js -->
	<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
	<!-- //js -->
	<!-- web-fonts -->
	<link href="//fonts.googleapis.com/css?family=Limelight" rel="stylesheet">
	<link href='//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic'
	    rel='stylesheet' type='text/css'>
	<!-- //web-fonts -->
</head>

<body>
	<!-- banner -->
	<div class="agileits-banner about-w3banner">
		<div class="bnr-agileinfo">
			<div class="banner-top w3layouts">
				<div class="container">
					<ul class="agile_top_section">
						<li>
							<p> Pets Care Website !</p>
						</li>
						<li>
							<p><span class="glyphicon glyphicon-earphone"></span> +11 999 8888 7777 </p>
						</li>
						<li><a class="sign" href="#" data-toggle="modal" data-target="#myModal2"><i class="fa fa-sign-in" aria-hidden="true"></i> Sign In</a>							</li>
					</ul>
				</div>
			</div>
			<div class="banner-w3text w3layouts">
				<h2>Pets Care</h2>
			</div>
			<!-- navigation -->
			<div class="top-nav w3-agiletop">
				<div class="agile_inner_nav_w3ls">
					<div class="navbar-header w3llogo">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<h1><a href="index.html">Pets Care</a></h1>
					</div>
					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<div class="w3menu navbar-left">
							<ul class="nav navbar">
								<li><a href="index.html">Home</a></li>
								<li><a href="about.html">About</a></li>
								<li><a href="gallery.html">Gallery</a></li>
								<li><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span data-letters="Pages">Pages</span><span class="caret"></span></a>
									<ul class="dropdown-menu">
										<li><a href="icons.html">Icons</a></li>
										<li><a href="typo.html">Typography</a></li>
									</ul>
								</li>
								<li><a href="contact.html">Contact</a></li>
							</ul>
						</div>
						<div class="w3ls-bnr-icons social-icon navbar-right">
							<a href="#" class="social-button twitter"><i class="fa fa-twitter"></i></a>
							<a href="#" class="social-button facebook"><i class="fa fa-facebook"></i></a>
							<a href="#" class="social-button google"><i class="fa fa-google-plus"></i></a>
							<a href="#" class="social-button dribbble"><i class="fa fa-dribbble"></i></a>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
			</div>
			<!-- //navigation -->
		</div>
	</div>
	<!-- //banner -->
	<!-- Modal1 -->
	<div class="modal fade" id="myModal2" tabindex="-1" role="dialog">
		<div class="modal-dialog">
			<!-- Modal content-->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>

					<div class="signin-form profile">
						<h3 class="agileinfo_sign">Sign In</h3>
						<div class="login-form">
							<form action="#" method="post">
								<input type="email" name="email" placeholder="E-mail" required="">
								<input type="password" name="password" placeholder="Password" required="">
								<div class="tp">
									<input type="submit" value="Sign In">
								</div>
							</form>
						</div>
						<div class="login-social-grids">
							<ul>
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-rss"></i></a></li>
							</ul>
						</div>
						<p><a href="#" data-toggle="modal" data-target="#myModal3"> Don't have an account?</a></p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //Modal1 -->
	<!-- Modal2 -->
	<div class="modal fade" id="myModal3" tabindex="-1" role="dialog">
		<div class="modal-dialog">
			<!-- Modal content-->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>

					<div class="signin-form profile">
						<h3 class="agileinfo_sign">Sign Up</h3>
						<div class="login-form">
							<form action="#" method="post">
								<input type="text" name="name" placeholder="Username" required="">
								<input type="email" name="email" placeholder="Email" required="">
								<input type="password" class="password" name="Password" id="password1" placeholder="Password" required="" />
								<input type="password" class="password" name="Confirm Password" id="password2" placeholder="Confirm Password" required=""
								/>
								<input type="submit" value="Sign Up">
							</form>
						</div>
						<p><a href="#"> By clicking register, I agree to your terms</a></p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //Modal2 -->

	<!-- single -->
	<div class="single welcome">
		<div class="container">
			<h3 class="agileits-title">Single Page</h3>
			<div class="markets-grids">
				<div class="col-md-7 w3ls_single_left">
					<div class="w3ls_single_left_grid">
						<div class="w3ls_single_left_grid_right">
							<h3>Voluptas nulla pariatur autem</h3>
							<h5>May 20,2017</h5>
							<ul>
								<li><span class="fa fa-user" aria-hidden="true"></span><a href="#">Admin</a></li>
								<li><span class="fa fa-envelope-o" aria-hidden="true"></span><a href="#">2 Comments</a></li>
								<li><span class="fa fa-heart-o" aria-hidden="true"></span><a href="#">50 Likes</a></li>
								<li><span class="fa fa-tag" aria-hidden="true"></span><a href="#">3 Tags</a></li>
							</ul>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="w3ls_single_left_grid1">
						<img src="images/g3.jpg" alt=" " class="img-responsive" />
						<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
							qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
							adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
							<span>Ut enim ad minima veniam, quis 
						nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex 
						ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea 
						voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem 
						eum fugiat quo voluptas nulla pariatur.</span></p>
						
						<div class="clearfix"> </div>
					</div>
					
				</div>
				<div class="col-md-5 w3ls_single_right">
					<div class="wthree_recent">
						<h4>Recent Posts</h4>
						<ul>
							<li><a href="#"><i class="fa fa-check" aria-hidden="true"></i>tempora incidunt ut labore dolore</a><span><i class="fa fa-calendar" aria-hidden="true"></i> June 21, 2017.</span></li>
							<li><a href="#"><i class="fa fa-check" aria-hidden="true"></i>voluptatem quia voluptas sit</a><span><i class="fa fa-calendar" aria-hidden="true"></i> June 23, 2017.</span></li>
							<li><a href="#"><i class="fa fa-check" aria-hidden="true"></i>sed quia consequuntur magni</a><span><i class="fa fa-calendar" aria-hidden="true"></i> June 24, 2017.</span></li>
							<li><a href="#"><i class="fa fa-check" aria-hidden="true"></i>ratione voluptatem sequi nesciunt</a><span><i class="fa fa-calendar" aria-hidden="true"></i> June 25, 2017.</span></li>
							<li><a href="#"><i class="fa fa-check" aria-hidden="true"></i>aspernatur aut odit aut fugit</a><span><i class="fa fa-calendar" aria-hidden="true"></i> June 28, 2017.</span></li>
						</ul>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			
			<div class="agileits_three_comments">
				<h3>3 Comments</h3>
				<div class="agileits_three_comment_grid">
					<div class="agileits_tom">
						<i class="fa fa-user"></i>
					</div>
					<div class="agileits_tom_right">
						<div class="hardy">
							<h4>Frank Lii</h4>
							<p>21 June 2017</p>
						</div>
						<div class="reply">
							<a href="#">Reply</a>
						</div>
						<div class="clearfix"> </div>
						<p class="lorem">Etiam interdum non dui dignissim vestibulum. In non velit et mi varius bibendum eu sit amet ante. Morbi ullamcorper
							nibh non dui volutpat volutpat. Pellentesque et porta urna.</p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="agileits_three_comment_grid agileits_three_comment_grid1">
					<div class="agileits_tom">
						<i class="fa fa-user" aria-hidden="true"></i>
					</div>
					<div class="agileits_tom_right">
						<div class="hardy">
							<h4>Richard Carl</h4>
							<p>05 June 2017</p>
						</div>
						<div class="reply">
							<a href="#">Reply</a>
						</div>
						<div class="clearfix"> </div>
						<p class="lorem">Interdum etiam non dui dignissim vestibulum. In non velit et mi varius bibendum eu sit amet ante. Morbi ullamcorper
							pellentesque et porta urna.</p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="agileits_three_comment_grid">
					<div class="agileits_tom">
						<i class="fa fa-user" aria-hidden="true"></i>
					</div>
					<div class="agileits_tom_right">
						<div class="hardy">
							<h4>Tom Hardy</h4>
							<p>18 May 2017</p>
						</div>
						<div class="reply">
							<a href="#">Reply</a>
						</div>
						<div class="clearfix"> </div>
						<p class="lorem">Etiam interdum non dui dignissim vestibulum. In non velit et mi varius bibendum eu sit amet ante. Morbi ullamcorper
							nibh non dui volutpat volutpat. Pellentesque et porta urna.</p>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
			<div class="w3_leave_comment">
				<h3>Leave your <span>comment</span></h3>
				<form action="#" method="post">
					<input type="text" name="Name" placeholder="Name" required="">
					<input class="email" type="email" name="Email" placeholder="Email" required="">
					<input type="text" name="Phone" placeholder="Phone" required="">
					<textarea placeholder="Message" name="Message" required=""></textarea>
					<input type="submit" value="SUBMIT">
				</form>
			</div>
		</div>
	</div>
	<!-- //single -->
	<!-- subscribe -->
	<div class="subscribe wthree-sub">
		<div class="container">
			<h4>Subscribe Now</h4>
			<form action="#" method="post">
				<input type="email" name="email" placeholder="Enter your Email..." required="">
				<input type="submit" value="Subscribe">
				<div class="clearfix"> </div>
			</form>
			<div class="w3lsfoter-icons social-icon">
				<a href="#" class="social-button twitter"><i class="fa fa-twitter"></i></a>
				<a href="#" class="social-button facebook"><i class="fa fa-facebook"></i></a>
				<a href="#" class="social-button google"><i class="fa fa-google-plus"></i></a>
				<a href="#" class="social-button dribbble"><i class="fa fa-dribbble"></i></a>
			</div>
		</div>
	</div>
	<!-- //subscribe -->
	<!-- copy rights start here -->
	<div class="copy-w3right">
		<div class="container">
			<div class="top-nav bottom-w3lnav">
				<ul>
					<li><a href="index.html">Home</a></li>
					<li><a href="about.html">About</a></li>
					<li><a href="gallery.html">Gallery</a></li>
					<li><a href="icons.html">Icons</a></li>
					<li><a href="typo.html">Typography</a></li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
			</div>
			<p>© 2017 Pets Care. All Rights Reserved | Design by <a href="http://w3layouts.com/" target="_blank">W3layouts</a> </p>
		</div>
	</div>
	<!-- //copy right end here -->
	<!-- password-script -->
	<script type="text/javascript">
		window.onload = function () {
			document.getElementById("password1").onchange = validatePassword;
			document.getElementById("password2").onchange = validatePassword;
		}

		function validatePassword() {
			var pass2 = document.getElementById("password2").value;
			var pass1 = document.getElementById("password1").value;
			if (pass1 != pass2)
				document.getElementById("password2").setCustomValidity("Passwords Don't Match");
			else
				document.getElementById("password2").setCustomValidity('');
			//empty string means no validation error
		}
	</script>
	<!-- //password-script -->

	<script src="js/SmoothScroll.min.js"></script>
	<!-- start-smooth-scrolling -->
	<script type="text/javascript" src="js/move-top.js"></script>
	<script type="text/javascript" src="js/easing.js"></script>
	<script type="text/javascript">
		jQuery(document).ready(function ($) {
			$(".scroll").click(function (event) {
				event.preventDefault();

				$('html,body').animate({
					scrollTop: $(this.hash).offset().top
				}, 1000);
			});
		});
	</script>
	<!-- //end-smooth-scrolling -->
	<!-- smooth-scrolling-of-move-up -->
	<script type="text/javascript">
		$(document).ready(function () {
			/*
			var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
			};
			*/

			$().UItoTop({
				easingType: 'easeOutQuart'
			});

		});
	</script>
	<!-- //smooth-scrolling-of-move-up -->
	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>